<template>
  <el-container>
    <el-aside width="300px">
      <el-tree
        :data="menus"
        :expand-on-click-node="false"
        ref="tree"
        default-expand-all
        @node-click="handleNodeClick"
      />
    </el-aside>
    <el-main>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" size="mini" @click="upHandler"
            >上传</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            icon="el-icon-refresh"
            size="mini"
            @click="refreshHandler"
          ></el-button>
        </el-col>
      </el-row>
      <el-table :data="data">
        <el-table-column label="名称" prop="name" min-width="150" />
        <el-table-column label="类型" prop="type" align="center">
          <template slot-scope="scope">
            <span v-show="scope.row.type == 1">目录</span>
            <span v-show="scope.row.type == 2">文件</span>
            <span v-show="scope.row.type == 3">链接文件</span>
          </template>
        </el-table-column>
        <el-table-column label="大小" prop="size" align="center" />
        <el-table-column label="修改时间" align="center" min-width="100">
          <template slot-scope="scope">{{ ft(scope.row.updateTime) }}</template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          min-width="80"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="downHandler(scope.row)"
              v-if="scope.row.type == 2"
              >下载</el-button
            >
            <el-button size="mini" type="text" @click="deleteHandler(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="上传"
        :visible.sync="uploadOpen"
        width="600px"
        append-to-body
        @open="open"
      >
        <el-form ref="uploadForm" :model="uploadForm" label-width="80px">
          <el-form-item label="路径">
            <el-input v-model="uploadForm.path" disabled></el-input>
          </el-form-item>
          <el-form-item label="文件">
            <el-upload
              ref="upload"
              :action="uploadUrl"
              :file-list="uploadFileList"
              :auto-upload="false"
              :limit="1"
              :data="uploadForm"
              :on-success="uploadSuccess"
              :on-error="uploadError"
            >
              <el-button slot="trigger" size="small" type="primary"
                >选取文件</el-button
              >
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button @click="submitUpload">确定</el-button>
            <el-button @click="cancelUpload">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <second-confirm
        titleP="确认删除"
        labelP="是否删除"
        :msgP="msg"
        :openP="confirmOpen"
        @on-second-confirm="secondConfirmHandler"
      ></second-confirm>
    </el-main>
  </el-container>
</template>
<script>
import {
  fileTreeNode,
  fileInfoList,
  getUploadFileUrl,
  getDownUrl,
  deleteFile,
} from "@/api/console";
import { getQueryObject, formatDate } from "@/utils/index";
import SecondConfirm from "@/components/SecondConfirm";
export default {
  name: "browse",
  components: { SecondConfirm },
  data() {
    return {
      host: "",
      menus: [],
      data: [],
      path: "",
      children: [],
      // 上传对话框是否打开
      uploadOpen: false,
      // 上传文件列表
      uploadFileList: [],
      // 上传地址
      uploadUrl: getUploadFileUrl(),
      uploadForm: {
        path: "",
      },
      //二次删除确认消息
      msg: "",
      confirmOpen: false,
      deletePath: "",
    };
  },
  activated() {
    const params = getQueryObject();
    const host = params.host;
    if (this.host != host) {
      this.host = host;
      this.uploadForm.host = host;
      this.menuTree();
      this.data = [];
    }
  },
  methods: {
    menuTree() {
      fileTreeNode(this.host).then((res) => {
        this.menus = res.data;
      });
    },
    handleNodeClick(data) {
      this.path = data.path;
      this.children = data.children;
      fileTreeNode(this.host, data.path).then((res) => {
        data.children = res.data;
      });
      fileInfoList(this.host, data.path).then((res) => {
        this.data = res.data;
      });
    },
    refreshHandler() {
      if (this.path === "") {
        this.msgError("请选择路径");
        return;
      }
      fileTreeNode(this.host, this.path).then((res) => {
        this.children = res.data;
      });
      fileInfoList(this.host, this.path).then((res) => {
        this.data = res.data;
        this.msgSuccess("操作成功");
      });
    },
    ft(timestamp) {
      return formatDate(timestamp);
    },
    downHandler(row) {
      this.$confirm("是否确认要下载?", "确定", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
        let aLink = document.createElement("a");
        aLink.style.display = "none";
        aLink.href = getDownUrl(this.host, row.path);
        aLink.setAttribute("download", row.path); // 下载的文件
        document.body.appendChild(aLink);
        aLink.click();
        document.body.removeChild(aLink);
      });
    },
    upHandler() {
      if (this.path === "") {
        this.msgError("请选择路径");
        return;
      }
      this.uploadForm.path = this.path;
      this.uploadOpen = true;
    },
    open() {},
    cancelUpload() {
      this.uploadOpen = false;
      this.$refs.upload.uploadFiles.splice(
        0,
        this.$refs.upload.uploadFiles.length
      );
    },
    submitUpload() {
      if (this.$refs.upload.uploadFiles.length == 0) {
        this.msgError("请选择文件");
        return;
      }
      this.$refs.upload.submit();
    },
    uploadSuccess(res, file, fileList) {
      if (res.success) {
        this.uploadOpen = false;
        this.$refs.upload.uploadFiles.splice(
          0,
          this.$refs.upload.uploadFiles.length
        );
        this.msgSuccess("上传成功");
      } else {
        this.msgError("上传失败:" + res.msg);
      }
    },
    uploadError(res, file, fileList) {
      this.msgError("接口错误");
    },
    deleteHandler(row) {
      this.msg = "确认要删除文件" + row.path;
      this.deletePath = row.path;
      this.confirmOpen = true;
    },
    secondConfirmHandler(data) {
      this.confirmOpen = false;
      if (data) {
        deleteFile(this.host, this.deletePath).then((res) => {
          this.msgSuccess("删除成功");
        });
      }
    },
  },
};
</script>
<style>
.el-aside {
  background-color: #fff;
  padding: 1px 0px;
  margin: 0px;
  min-height: 500px;
}
</style>
